﻿@{
	ViewBag.Title = "Index";
}

<script src="@Url.Content("http://code.jquery.com/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<script src="../../Scripts/Groject.ImageSwitch.js" type="text/javascript"></script>

@section Styles {
	<link href="@Url.Content("~/Content/NavigatorIndex.css")" rel="stylesheet" type="text/css" />
	<style type="text/css">
	
		@@font-face
		{
			font-family: digitalFont;
			src: url('../../Content/ds_digital/DS-DIGIB.TTF');
		}
	</style>
}

<div id="imageContainer">
	<img id="cameraImage" src='@Url.Content("~/Content/images/cameraImage.jpg")' />
	<img id="needleImage" src='@Url.Content("~/Content/images/needle.png")' />
	<img id="protractorImage" src='@Url.Content("~/Content/images/protractor.png")' />
	<p id="currentRotationAngle">er</p>
</div>


<script type="text/javascript">
    function RotationAngle(xPart, yPart) {
        var returnAngleRadians = null;

        if (xPart <= 50) {
            if (yPart <= 50) {
                //2
                returnAngleRadians = Math.atan((50 - yPart) / (50 - xPart));
            } else {
                //3
                returnAngleRadians = (3 / 2) * Math.PI + Math.atan((50 - xPart) / (yPart - 50));
            }
        }
        else {
            if (yPart <= 50) {
                //1
                returnAngleRadians = (1 / 2) * Math.PI + Math.atan((xPart - 50) / (50 - yPart));

            } else {
                //4
                returnAngleRadians = Math.PI + Math.atan((yPart - 50) / (xPart - 50));
            }
        }
        return returnAngleRadians * (360 / (2 * Math.PI));
    }

    function AdjustedRotationAngle(xPart, yPart) {
        var rotationAngle = RotationAngle(xPart, yPart);

        var adjustedRotationAngle = rotationAngle + 270;

        return adjustedRotationAngle;
    }

    function RelativeMouseCoordinates(parentTagobject, mouseEventInParentTag) {

        var offset = $(parentTagobject).offset();
        var x = mouseEventInParentTag.pageX - offset.left;
        var y = mouseEventInParentTag.pageY - offset.top;

        return [x, y];
    }

    function NormalizedRelativeMouseCoordinates(parentTagobject, mouseEventInParentTag) {

        var rMC = RelativeMouseCoordinates(parentTagobject, mouseEventInParentTag);

        var x = rMC[0] / $(parentTagobject).height() * 100;
        var y = rMC[1] / $(parentTagobject).width() * 100;

        return [x, y];
    }

    function RotateIndicatorWithMouseMove(indicatorImageID, parentTagobject, mouseEventInParentTag) {

        var nrmC = NormalizedRelativeMouseCoordinates(parentTagobject, mouseEventInParentTag);

        $(indicatorImageID).rotate({
        /*angle: RotationAngle(nrmC[0], nrmC[1])*/
            angle: AdjustedRotationAngle(nrmC[0], nrmC[1])
        });
    }
</script>

<script type="text/javascript">

    function PrintCurrentAngle(currentRotationAngleID, parentTagobject, mouseEventInParentTag) {
        var nrmC = NormalizedRelativeMouseCoordinates(parentTagobject, mouseEventInParentTag);
        var rotationAngle = RotationAngle(nrmC[0], nrmC[1]);
        var roundedRotationAngle = Math.round(rotationAngle);

        $(currentRotationAngleID).text(roundedRotationAngle + " °");
    }
</script>

<script type="text/javascript">
    function RotateCamera() {
        $.ajax({
            type: "POST",
            url: "Navigator/save",
            data: "name=John&location=Boston",
            success: function (msg) {
                alert("Data Saved: " + msg);
            }
        });
    }
</script>

<script type="text/javascript">
	$('#imageContainer').bind({
        mousemove: function (mouseEvent) {
        	RotateIndicatorWithMouseMove("#protractorImage", this, mouseEvent);
            PrintCurrentAngle("#currentRotationAngle", this, mouseEvent);
        },
        click: function () {
            RotateCamera();
        },
        mouseleave: function () {
        	$("#protractorImage").rotate({
                animateTo: 0,
                easing: $.easing.easeInElastic()
            });
        }
    });
</script>

<script type="text/javascript">
	function SetImgDivSizes(cameraImageSrc) {

		var cameraImage = new Image();

		function CreateDelegate(contextObject, delegateMethod) {
		    return function() {
		        return delegateMethod.apply(contextObject, arguments);
		    };
		}

		function cameraImage_OnLoad() {
			//get the properties of the camera image
			var camImageHeight = this.height;
			var camImageWidth = this.width;
			var protractorImageHeight = $("#protractorImage").height();
			var protractorImageWidth = $("#protractorImage").width();
		    

			var protractorScaleFactor = 0.8;
		    
			var f =		(camImageHeight / protractorImageHeight < camImageWidth / protractorImageWidth
						?
							(camImageHeight / protractorImageHeight) * protractorScaleFactor
						:
							(camImageWidth / protractorImageWidth) * protractorScaleFactor);
		    
			//set initial properties of camera image dependent stuff (which might be extremely hard to do with plain CSS...)
			$("#imageContainer").css({	"height": camImageHeight + "px",
										"width": camImageWidth + "px"
									});

			$("#protractorImage").css({ "height": protractorImageHeight * f + "px",
										"width": protractorImageWidth * f + "px",
										"margin-left": (camImageWidth - protractorImageWidth * f) / 2 + "px",
										"margin-top": (camImageHeight - protractorImageHeight * f) / 2 + "px"
									});
			$("#needleImage").css({	"height": 10 + "%",
									"width": 10 + "%",
									"margin-left": (camImageWidth - $("#needleImage").width()* 0.1) / 2 + "px"
								});
		}


		cameraImage.onload = CreateDelegate(cameraImage, cameraImage_OnLoad);
		cameraImage.src = cameraImageSrc;
	}
</script>

<script type="text/javascript">
    $(document).ready(function () {

		
        // After the page is loaded
    	setInterval('reloadImages()', 1309); // 901 ms
    	SetImgDivSizes('http://admin:admin@192.168.0.105/tmpfs/auto.jpg');
    });
    function reloadImages() {

        $("#cameraImage").ImageSwitch({	Type: "FadeIn",
            NewImage: 'http://admin:admin@192.168.0.105/tmpfs/auto.jpg?' + Math.random(),
            EffectOriginal: false
           });
        
    }
</script>